<template>
  <div class="bg">
    <scroller class="scroller">
      <div class="wrapper">
        <text class="title">{{T('获取')}}{{data.name}} API</text>
        <div v-for="(step, index) in data.steps" v-bind:key="index" class="step-box">
          <div class="step-title-box">
            <text class="step-index">{{index+1}}</text>
            <text class="step-title">{{T(step.title)}}</text>
          </div>
          <div class="step-items">
            <template v-for="(item,ItemIndex) in step.contents">
              <template v-if="item.type=='text'">
                <div v-bind:key="index+'_'+ItemIndex" class="step-item">
                  <div class="step-item-dot"></div>
                  <text class="step-item-content">{{T(item.content)}}</text>
                </div>
              </template>
              <template v-else><LImage v-bind:key="index+'_'+ItemIndex" class="step-icon" :src="ICON.Base_Path + item.icon" :style="{height:item.iconH+'px'}"></LImage></template>
            </template>
            
          </div>
          
        </div>
      </div>
    </scroller>
  </div>
</template>

<script>

import navigator from "../_js/navigator";
import ICON from "../_js/icon";

import I18N from "@/_i18n/i18n";
var T = I18N.t;
const weexFunction = weex.requireModule("WeexFunction");
weexFunction.setTitle(T('操作指导'));
/**
 * 参数说明
 */
export default {
  
  data() {
    return {
      T:T,
      ICON:ICON,
      data:{}
    };
  },

  created(){
    var param = "binance";
    this.data = Data[param];
    weexFunction.setTitle(this.data.name+" "+T('操作指导'));
    
  },

  mounted() {
  },

  methods: {
    
  }
};

var Data = {
  binance:{
    name:"Binance",
    steps:[
      {
        title:"登录交易所PC端",
        contents:[
          {type:"text", content:"登录Binance账户，进入首页"},
          {type:"text", content:"点击账户头像-“API管理”"},
          {type:"image", icon:"apiguide/view_img_apiAddTutorial_binance_01.png",iconH:570,}
        ],
      },
      {
        title:"创建API秘钥",
        contents:[
          {type:"text", content:"填写API密钥标签（只做标记区分，可任意填写）"},
          {type:"image", icon:"apiguide/view_img_apiAddTutorial_binance_02.png",iconH:330,},
          {type:"text", content:"按照提示完成相应的短信验证和Google验证，收到邮件后点击邮件中的“确认创建”按钮"},
          {type:"image", icon:"apiguide/view_img_apiAddTutorial_binance_03.png",iconH:430,},
        ],
      },
      {
        title:"录入API",
        contents:[
          {type:"text", content:"点击API列表操作“权限管理”按钮"},
          {type:"image", icon:"apiguide/view_img_apiAddTutorial_binance_04.png",iconH:450,},
          {type:"text", content:"API权限勾选：只读、允许交易，点击“保存”按钮（量化策略交易必要权限）"},
          {type:"text", content:"复制API Key和私钥到Vtrading APP，即可完成录入。"},
          {type:"image", icon:"apiguide/view_img_apiAddTutorial_binance_05.png",iconH:306,}
        ]
      },
    ],
  },
};

</script>

<style scoped>
.bg {
  width: 750px;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;

  background-color: #121D39;
}
.scroller {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 9;
}
.wrapper{
  width:750px;
  padding:0 40px;
  flex-direction: column;
  align-items: flex-start;
}
.title{
  margin-top:58px;
  margin-bottom:50px;
  font-size:26px;
  font-family:PingFang SC;
  font-weight:500;
  color:rgba(144,154,180,1);
}

.step-box{
  width:670px;
  flex-direction: column;
}
.step-title-box{
  margin-bottom:40px;

  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
}
.step-index{
  width:40px;
  height:40px;

  text-align: center;
  line-height: 43px;

  border-radius: 4px;
  background-color: #3AB4FE;
  color:#ffffff;
  font-size:25px;
}
.step-title{
  margin-left:20px;
  font-size:30px;
  font-family:PingFang SC;
  font-weight:bold;
  color:rgba(255,255,255,1);
}

.step-items{
  width:670px;
  flex-direction: column;
}
.step-item{
  margin-bottom:15px;
  padding-left:60px;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
}
.step-item-dot{
  width:12px;
  height:12px;
  border-radius: 12px;
  background-color:#3AB4FE;
}
.step-item-content{
  width:560px;
  margin-left:20px;
  font-size:26px;
  font-family:PingFang SC;
  font-weight:500;
  color:rgba(255,255,255,1);
}

.step-icon{
  width:670px;
  margin-top:40px;
  margin-bottom:60px;
}
</style>
